<template>
  <div>
    <FormPanel ref="formPanel" :list="formList" :formType="type" @formChange="formChangeHandle" :isSubmitBtn="false" :collapse="false" />

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <multiuse-button type="primary" v-show="type != 'show'" :click="dataHandle.bind(this, 60881002)">提 交</multiuse-button>
      <multiuse-button type="primary" v-show="type != 'show'" :click="dataHandle.bind(this, 60881001)">保 存</multiuse-button>
      <el-button @click="closeDrawer">返 回</el-button>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import { queryById, saveData } from '@/api/dealerSale/TestDrive/VehicleInspectionApply';

export default {
  mixins: [dictionary],
  props: ['type', 'rowData'],
  components: {},
  data() {
    this.saveData = null;
    return {
      formList: this.createdFrom(),
      vinData: [],
      formData: {},
      isShowVin: false,
      vehicleId: ''
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      if (this.type == 'add') return;
      const res = await queryById(this.rowData.id);
      if (res.resultCode == 200) {
        let fileUrl = [];
        this.formList.map(x => {
          if (res.data.enclosures && res.data.enclosures.length > 0) {
            res.data.enclosures.map(x => {
              let json = {
                uid: x.id,
                type: x.enclosureType,
                name: x.enclosureName,
                url: x.enclosureUrl
              };
              fileUrl.push(json);
            });
          }

          fileUrl.map(y => {
            if (x.fieldName == 'clzp' && y.type == '车辆照片') {
              x.initialValue = [y];
            } else if (x.fieldName == 'xslc' && y.type == '行驶里程照片') {
              x.initialValue = [y];
            } else if (x.fieldName == 'sjjl' && y.type == '客户试驾记录') {
              x.initialValue = [y];
            } else if (x.fieldName == 'xsp' && y.type == '小视频（10秒左右）') {
              x.initialValue = [y];
            }
          });
          if (x.fieldName != 'clzp' && x.fieldName != 'xslc' && x.fieldName != 'sjjl' && x.fieldName != 'xsp') {
            x.initialValue = res.data[x.fieldName];
          }
        });
      }
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    vinHandle() {
      this.isShowVin = true;
    },
    closeDialog(val, data) {
      this.isShowVin = val;
      if (data) {
        this.vehicleId = data[0].vehicleId;
        this.setFormData(data[0]);
      }
      console.log(data, '---关闭VIN---');
    },
    setFormData(data) {
      for (let key in data) {
        this.formList.map(x => {
          if (x.fieldName == key) {
            x.initialValue = data[x.fieldName];
          }
        });
      }
    },
    async dataHandle(status) {
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.saveData) {
        // 编辑传ID
        if (this.type == 'edit') {
          this.saveData.id = this.rowData.id ? this.rowData.id : '';
        }
        this.saveData.enclosures = [];
        this.saveData.vehicleId = this.vehicleId ? this.vehicleId : this.rowData.vehicleId;
        this.saveData.checkStatus = status;
        if (this.saveData.clzp.length > 0) {
          this.saveData.enclosures.push({
            enclosureType: '车辆照片',
            enclosureName: this.saveData.clzp[0].name,
            enclosureUrl: this.saveData.clzp[0].url
          });
        }
        if (this.saveData.xslc.length > 0) {
          this.saveData.enclosures.push({
            enclosureType: '行驶里程照片',
            enclosureName: this.saveData.xslc[0].name,
            enclosureUrl: this.saveData.xslc[0].url
          });
        }
        if (this.saveData.sjjl.length > 0) {
          this.saveData.enclosures.push({
            enclosureType: '客户试驾记录',
            enclosureName: this.saveData.sjjl[0].name,
            enclosureUrl: this.saveData.sjjl[0].url
          });
        }
        if (this.saveData.xsp.length > 0) {
          this.saveData.enclosures.push({
            enclosureType: '小视频（10秒左右）',
            enclosureName: this.saveData.xsp[0].name,
            enclosureUrl: this.saveData.xsp[0].url
          });
        }
        let res = await saveData(this.saveData);

        if (res.resultCode == 200) {
          this.$notify.success({ title: '提示信息', message: '操作成功' });
          this.$emit('close', false, 'refresh');
        }
      }
    },
    closeDrawer() {
      this.$emit('close');
    },

    createdFrom() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '车辆信息'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车系',
          fieldName: 'seriesName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车型',
          fieldName: 'modelName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '配置',
          fieldName: 'packageName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '内饰',
          fieldName: 'trimColor',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '外饰',
          fieldName: 'colorName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'TEXT_AREA',
          label: '备注',
          fieldName: 'remark',
          selfCols: 2,
          placeholder: ''
        },
        {
          type: 'BREAK_SPACE',
          label: '附件信息'
        },
        {
          type: 'UPLOAD_FILE',
          label: '车辆照片',
          fieldName: 'clzp',
          labelWidth: '130px',
          offsetRightCols: 1,
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1,
            max: 1024,
            fileSize: 1,
            isFileName: true
          }
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'UPLOAD_FILE',
          label: '行驶里程照片',
          fieldName: 'xslc',
          labelWidth: '130px',
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1,
            max: 1024,
            fileSize: 1,
            isFileName: true
          }
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'UPLOAD_FILE',
          label: '客户试驾记录',
          fieldName: 'sjjl',
          labelWidth: '130px',
          offsetRightCols: 1,
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1,
            max: 1024,
            fileSize: 1,
            isFileName: true
          }
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'UPLOAD_FILE',
          label: '小视频（10秒左右）',
          fieldName: 'xsp',
          labelWidth: '130px',
          upload: {
            actionUrl: '/api/file/oss/upload',
            limit: 1,
            max: 1024,
            fileSize: 1,
            isFileName: true
          }
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        }
      ];
    }
  }
};
</script>
